import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheckCircle, faCircle } from '@fortawesome/free-regular-svg-icons';

interface Task {
  id: string;
  title: string;
  completed: boolean;
  dueDate: string;
  priority: 'low' | 'medium' | 'high';
}

interface TaskListProps {
  tasks: Task[];
  onTaskToggle: (taskId: string) => void;
}

const priorityColors = {
  low: 'bg-green-100 text-green-800',
  medium: 'bg-yellow-100 text-yellow-800',
  high: 'bg-red-100 text-red-800'
};

export const TaskList: React.FC<TaskListProps> = ({ tasks, onTaskToggle }) => {
  return (
    <div className="space-y-4">
      {tasks.map((task) => (
        <div
          key={task.id}
          className="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-100"
        >
          <div className="flex items-center space-x-3">
            <button
              onClick={() => onTaskToggle(task.id)}
              className={`text-lg ${task.completed ? 'text-green-500' : 'text-gray-400'}`}
            >
              <FontAwesomeIcon icon={task.completed ? faCheckCircle : faCircle} />
            </button>
            <span className={`${task.completed ? 'line-through text-gray-400' : 'text-gray-900'}`}>
              {task.title}
            </span>
          </div>
          <div className="flex items-center space-x-4">
            <span className={`px-2 py-1 text-xs font-medium rounded-full ${priorityColors[task.priority]}`}>
              {task.priority}
            </span>
            <span className="text-sm text-gray-500">{task.dueDate}</span>
          </div>
        </div>
      ))}
    </div>
  );
}; 